<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style rel="stylesheet" type="text/css">
        div{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            /*单行文本垂直居中*/
            height: fit-content;
            line-height: 100px;
            /*border-box，宽度width包含width，padding，border*/
            /*box-sizing: border-box;*/
            /*padding-box,宽度width包含width，padding*/
            /*box-sizing: padding-box;*/
            /*content-box的宽度只包含width*/
            box-sizing: content-box;
            margin: 20px 10px;
            border: 1px double #ffcf68;
            padding: 20px;
            text-align: center;
            font-family: 宋体, serif;
            font-size: 30px;
            font-weight: 700;
        }
        .updateContentByJquery {
            color: #9e73ff;
        }
        p,span {
            /*引用图片目的，比较js的onload方法与jquery的ready方法*/
            background-image: url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
        }
        .updateContentByJs {
            color: #ff0012;
        }
        span {
            display: block;
            padding: 20px;
            border-top: 1px solid #ff1c06;
        }

    </style>
</head>
<body>
<div>
    <p>Jquery(click here)</p>
    <span>JavaScript(click here)</span>
</div>
<!--嵌入jQuery库的方法：本地下载，使用CDN(content delivery network)-->
<!--<script type="text/javascript" src="jquery-1.12.4.js"></script>-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
/*
    原生js的onload方法与jQuery的ready方法不同点：
    ready可执行多次，而onload只执行最后一个
    ready在html解析完成以及dom树加载完成即可执行，
    而onload在html解析完成以及dom加载完成，并且要求所有的外部图片和资源全部加载完成之后才能执行
*/

    window.onload = function () {
        var getP = document.getElementsByTagName('span')[0];
        getP.onclick = function () {
            this.className = "updateContentByJs";
            alert("点击js");
        }

    };
    $(document).ready(function () {
        $('p').bind('click', function () {
            /*jquery方法链（包装器集）
            一次性选择一组dom，能够减少处理开销
            避免不必要的dom遍历，尽可能重用/缓存选中的dom集*/
            $(this).hide().text("新闻本内容").addClass('updateContentByJquery').show();
            alert("点击jQuery");
        });
        /*// 隐藏所有的p
        $('p').hide();
        // 更新p包含的内容
        $('p').text("新文本内容");
        // 为p标签添加类
        $('p').addClass("updateContentByJquery");
        // 显示所有的p
        $('p').show();*/
    })
</script>
</body>
</html>